<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dom</title>
  <style>

  </style>
</head>

<body>
  <!-- 别有空格和换行  -->
  <div id="d1" class="red green" name="张三"><p id="p1">我是p</p><a href="#">我是a</a></div>
</body>
<script>
  // 对dom 节点进行操作
  let div1 = document.querySelector("#d1")
  // 获取元素下边所有的子元素(标签和文本)
  let cnode = div1.childNodes;
  console.log(cnode)
  // 父节点
  let body = div1.parentNode
  console.log(body)
  // 第一个子节点
  let p = div1.firstChild
  // 最后一个子节点
  let a = div1.lastChild
  console.log(p)
  console.log(a)
  // 前一个兄弟节点
  let pa = a.previousSibling
  console.log(pa)
  //下一个兄弟 节点
  let ap = p.nextSibling
  console.log(ap)
  // 删除子节点
  // div1.removeChild(p)
  // replaceChild(newnode,oldnode);
  var textnode=document.createTextNode("p的text节点被替换");
  p.replaceChild(textnode,p.firstChild)
</script>

</html>